<template>
    <section class="create-ad">
        <el-form ref="adCreate" :model="adCreate" :rules="rules" label-position="right" label-width="96px">
            <el-form-item label="广告形式:" class="adc-form">
                <el-button-group class="switch-btn-group">
                    <el-button @click="adCreate.adForm = 'image'" :class="{'switch-avtive':adCreate.adForm === 'image'}">图片</el-button>
                    <el-button @click="adCreate.adForm = 'video'" :class="{'switch-avtive':adCreate.adForm === 'video'}">视频</el-button>
                </el-button-group>
                <div v-if="adCreate.adForm === 'image'" class="adc-upload-wraper">
                 <div class="adc-box">
                     <h3 class="adc-box-title"><span class="iconfont icon-focus"></span>推荐图片参数</h3>
                     <span class="adc-box-name">图片尺寸：<span>1200x628像素</span></span>
                     <span class="adc-box-name">图片长宽比：<span>1.91:1</span></span>
                     <span class="adc-box-name">轮播和幻灯片：<span>至少2张、最多5张图片</span></span>
                 </div>
                 <div class="adc-btn-group">
                     <el-button :plain="true" @click="showUploadImg">
                         本地上传
                         <!--<input type="file" @change="uploadImageChange" ref="adImage" accept="image/*">-->
                     </el-button>
                     <el-button @click="showImgs" :plain="true">图片素材</el-button>
                 </div>
                 <ul class="adc-upload-list">
                     <li v-for="(item,index) in adCreate.uploadImages" :key="item" class="adc-upload-item" :style="'min-width:'+imgSize[index].setW+'px'">
                         <img :index="index" @click="editImageIndex = index" :class="[{active: editImageIndex == index},'click']" :src="item" alt="img">
                         <i @click="deleteImages(index)" class="el-icon-close"></i>
                     </li>
                 </ul>
                 <el-form-item v-show="adverPlan != '主页赞'" label="播放方式：" label-width="109px">
                     <el-checkbox v-model="adCreate.isCarousel">轮播</el-checkbox>
                     <span class="adc-tips"> （如果不选择，将按照单个图片拆分显示）</span>
                 </el-form-item>
                 <div style="position: relative">
                    <div v-for="(item,index) in adCreate.imageInfo" v-show="editImageIndex == index" :class="{zhuyeZan: adverPlan == '主页赞'}" :key="item.id">
                        <el-form-item v-if="adverPlan != '主页赞'" label="广告标题：" label-width="109px">
                            <el-input class="lengthLimit" v-model="item.title" :maxlength="100"></el-input><span class="adc-tips stringCount"> {{100-item.title.length}}</span>
                        </el-form-item>
                        <el-form-item v-if="!adCreate.isCarousel" :class="[{zhuyeZan: adverPlan == '主页赞'},'ad-message']" label="广告文字：" label-width="109px" :prop="'imageInfo.'+index+'.text'"
                                      :rules=" adverPlan == '主页赞' ? [{required: true, message: '该项为必填项', trigger: 'blur'}] : []">
                            <el-input class="lengthLimit" v-model="item.text" :maxlength="200"></el-input><span class="adc-tips stringCount">  {{200-item.text.length}}</span>
                        </el-form-item>
                        <el-form-item v-if="adverPlan != '主页赞'" class="ad-message-position" label="说明：" label-width="109px">
                            <el-input class="lengthLimit" v-model="item.state" :maxlength="200"></el-input><span class="adc-tips stringCount"> {{200-item.state.length}}</span>
                        </el-form-item>
                        <el-form-item v-if="adverPlan != '主页赞'" label="链接网址" label-width="109px" :prop="'imageInfo.'+index+'.link'"
                                      :rules="[{required: true, message: '该项为必填项', trigger: 'blur'}]">
                            <el-input v-model="item.link" @blur="checkUrl(item.link,index)"></el-input>
                        </el-form-item>
                        <div v-if="adverPlan != '主页赞'" class="adc-tips adc-link-tips">如果多个图片需要链接不同地址，请为每个图片添加网址</div>
                    </div>
                     <el-form-item v-if="adCreate.isCarousel" :class="[{zhuyeZan: adverPlan == '主页赞'},'ad-message']" label="广告文字：" label-width="109px" prop="message"
                                   :rules=" adverPlan == '主页赞' ? [{required: true, message: '该项为必填项', trigger: 'blur'}] : []">
                         <el-input class="lengthLimit" v-model="adCreate.message" :maxlength="200"></el-input><span class="adc-tips stringCount">  {{200-adCreate.message.length}}</span>
                     </el-form-item>
                 </div>
                </div>
                <div v-else="adCreate.adForm == 'video'" class="adc-upload-wraper">
                    <div class="adc-box">
                        <h3 class="adc-box-title"><span class="iconfont icon-focus"></span>推荐的视频参数</h3>
                        <div>
                            <span class="adc-box-name">格式：<span>.MOV、.MP4或.GIF文件</span></span>
                            <span class="adc-box-name">分辨率：<span>至少为720p</span></span>
                            <span class="adc-box-name">文件大小：<span>2.3GB以内</span></span>
                        </div>
                        <div>
                            <span class="adc-box-name">推荐宽高比：<span>宽屏（16:9）</span></span>
                            <span class="adc-box-name">Facebook：<span>60分钟以内</span></span>
                            <span class="adc-box-name">Instagram：<span>最长60秒</span></span>
                        </div>
                    </div>
                    <div class="adc-btn-group">
                        <el-button :plain="true" @click="showUploadVideo">
                            本地上传
                            <!-- <input type="file" @change="uploadVideoChange" ref="adVideo" accept="video/*"> -->
                        </el-button>
                        <el-button @click="showVideos" :plain="true">视频素材</el-button>
                    </div>
                    <ul class="adc-upload-list">
                        <li v-show="adCreate.uploadVideo.src" class="adc-upload-item">
                            <video :src="adCreate.uploadVideo.src" width="100%" id="video"></video>
                            <i @click="deleteVideos" class="el-icon-close"></i>
                            <span v-show="!adCreate.uploadVideo.play" @click="playVideo" class="iconfont icon-play"></span>
                            <span  @click="pauseVideo" :class="[{show: adCreate.uploadVideo.play},'iconfont','icon-stop']"></span>
                        </li>
                    </ul>
                    <div >
                        <el-form-item v-if="adverPlan != '主页赞'" label="广告标题：" label-width="109px">
                            <el-input class="lengthLimit" v-model="adCreate.videoInfo.title" :maxlength="100"></el-input><span class="adc-tips stringCount">  {{100-adCreate.videoInfo.title.length}}</span>
                        </el-form-item>
                        <el-form-item label="广告文字：" label-width="109px" prop="message"
                                      :rules=" adverPlan == '主页赞' ? [{required: true, message: '该项为必填项', trigger: 'blur'}] : []">
                            <el-input class="lengthLimit" v-model="adCreate.message" :maxlength="200"></el-input><span class="adc-tips stringCount"> {{200-adCreate.message.length}}</span>
                            <!--<el-button v-show="index === 0" @click="addAdTextItem" class="adc-add-btn" type="primary" icon="plus"></el-button>
                            <el-button v-show="index > 0" @click="removeAdTextItem(index)" class="adc-delete-btn" type="primary" icon="delete"></el-button>-->
                        </el-form-item>
                        <el-form-item v-if="adverPlan != '主页赞' " label="说明：" label-width="109px">
                            <el-input class="lengthLimit" v-model="adCreate.videoInfo.state" :maxlength="200"></el-input><span class="adc-tips stringCount"> {{200-adCreate.videoInfo.state.length}}</span>
                        </el-form-item>
                        <el-form-item v-if="adverPlan != '主页赞' " label="链接网址" label-width="109px" prop="videoInfo.link"
                                      :rules="[{required: true, message: '该项为必填项', trigger: 'blur'}]">
                            <el-input v-model="adCreate.videoInfo.link" @blur="checkUrl(adCreate.videoInfo.link)"></el-input>
                        </el-form-item>
                        <div v-if="adverPlan != '主页赞' " class="adc-tips adc-link-tips">如果多个图片需要链接不同地址，请为每个图片添加网址</div>
                    </div>
                </div>
            </el-form-item>

            <el-form-item v-show="totalAdPage > 0" label="广告预览：">
                <div class="adc-preview">
                    <div class="preview-header">
                        <el-select v-model="adCreate.preview" placeholder="请选择">
                            <el-option v-for="item in adPreviewPlatform" :key="item.id" :value="item"></el-option>
                        </el-select>
                        <div class="pagination">
                            第<span class="current">{{currentAdPage}}</span>/<span>{{totalAdPage}}</span>条广告
                            <el-button @click="pageChange('prev')" :class="{disable: currentAdPage === 1}" icon="arrow-left"></el-button>
                            <el-button @click="pageChange('next')" :class="{disable: currentAdPage >= totalAdPage}" icon="arrow-right"></el-button>
                        </div>
                    </div>
                    <div class="preview-body">
                        <pc-dynamic-message :data="adPreviewData" v-if="adCreate.preview == '桌面版动态消息'"/>
                        <mb-dynamic-message :data="adPreviewData" v-else-if="adCreate.preview == '移动版动态消息'"/>
                        <instagram-dynamic :data="adPreviewData" v-else-if="adCreate.preview == 'Instagram 动态'"/>
                        <dumbphone :data="adPreviewData" v-else-if="adCreate.preview == '非智能手机'"/>
                        <pc-right-message :data="adPreviewData" v-else-if="adCreate.preview == '桌面版右边栏'"/>
                        <network-banner :data="adPreviewData" v-else-if="adCreate.preview == 'Audience Network 横幅广告'"/>
                        <network-insert :data="adPreviewData" v-else-if="adCreate.preview == 'Audience Network 插播式广告'"/>
                        <audience-network-native :data="adPreviewData" v-else-if="adCreate.preview == 'Audience Network 原生广告'"/>
                        <read-text :data="adPreviewData" v-else-if="adCreate.preview == '即阅文'"/>
                        <facebook-video-pc :data="adPreviewData" v-else-if="adCreate.preview == 'Facebook 视频插播广告位（桌面版）'"/>
                        <facebook-video-pc :data="adPreviewData" v-else-if="adCreate.preview == 'Facebook 视频插播广告位（移动版）'"/>
                    </div>
                </div>
            </el-form-item>

            <div class="advance-setting ">
                <div class="bs-title"><span class="label">高级设置：</span><el-switch v-model="showMoreSetting" on-text="" off-text="" ></el-switch></div>
                <div v-show="showMoreSetting" class="bs-container">
                    <el-form-item label="选择主页：" label-width="114px" prop="homePage">
                        <el-select v-model="adCreate.homePage" placeholder="请选择">
                            <el-option v-for="(item,i) in homePageList" :key="i" :label="item.name" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="adverPlan === '访问量'" label="展示链接：" label-width="114px">
                        <el-input v-model="adCreate.showLink" placeholder="广告会向用户显示此网址"></el-input>
                    </el-form-item>
                </div>
            </div>
            <el-form-item prop="name" label="广告名称" label-width="102px">
                <el-input class="lengthLimit" v-model="adCreate.name" :maxlength="50"></el-input><span class="adc-tips stringCount"> {{nowLength}}</span>
            </el-form-item>
            <div v-show="totalAdPage > 1" class="abtest-con"><span class="iconfont icon-adapart" style="color: #b4c1c8"></span> <span style="color: #333"> A/B测试广告</span>：（根据广告内容的不同拆分成多个广告，可以看哪个广告效果更好，不影响总预算）<br>
                <span style="color: #333">Facebook拆分广告：</span><span class="current">{{totalAdPage}}</span>个
            </div>

            <div class="FB-ad-tips">
                <div class="FB-ad-con">
                    <h3 class="FB-ad-title"><span class="iconfont icon-focus"></span>温馨提醒：</h3>
                    <div class="FB-ad-state">由于Facebook账号政策严格，您绑定的Facbook账号可能由于日常操作不当导致封号，我们温馨提醒您从以下几种情况着手防止账号被封：</div>
                    <div class="FB-ad-state">1. 千万不要发布Facebook<a href="https://zh-cn.facebook.com/policies/ads" target="_blank">广告条款</a>明确禁止的内容；</div>
                    <div class="FB-ad-state">2. 同一部计算机避免登录多个账号，如果有多个账号，建议在更换账号时清理浏览器缓存，并更换翻墙IP；</div>
                    <div class="FB-ad-state">3. 同一身份避免重复申请多个账号；</div>
                    <div class="FB-ad-state">4. 即使使用相同VPN，也尽可能避免多地区登录；</div>
                    <div class="FB-ad-state">5. 使用稳定的翻墙IP，特别注意手机端和PC端翻墙地址一致；</div>
                    <div class="FB-ad-state">6. 不要频繁加入大量群组，在群组中发消息一定要注意内容的合适性，群组中的硬广特别容易被举报，导致账号被禁用；</div>
                    <div class="FB-ad-state">8. 添加信任联系人，账号绑定手机，以提升帐户稳定性，方便验证；</div>
                    <div class="FB-ad-state">9. 注册<a href="https://business.facebook.com/" target="_blank">商务管理平台</a>账号，提升个人帐户的稳定性；</div>
                    <div class="FB-ad-state">10. 信用卡支付的账号，开户地址与Facebook登录IP地址保持一致；</div>
                    <div class="FB-ad-state">11. 避免在企业广告账号中，申请的账号对应类别（如服装，电子产品等），与投放广告推广的产品类别不一致。</div>
                    <div class="FB-ad-state"><br>祝您体验愉快～</div>
                </div>
            </div>

            <el-form-item v-if="!edit" label="" label-width="102px">
                <div v-if="postFlag" class="no-homepage-tip">请先创建一个Facebook主页 <a target="_blank" href="https://www.facebook.com/pages/create/?ref_type=pages_you_admin">创建主页</a></div>
                <el-button @click="nextStep('draft')" v-show="!adDraftStatus" :disabled="adPostStatus" class="bd-draft-btn" :plain="true">保存为草稿</el-button>
                <el-button v-show="adDraftStatus" :loading="true" class="bd-draft-btn" :plain="true">保存中</el-button>
                <el-button @click="nextStep('post')" :disabled="adPostDisable" v-show="!adPostStatus" class="bd-next-btn" type="primary">发布广告</el-button>
                <el-button v-show="adPostStatus" class="bd-next-btn" type="primary" :loading="true">发布中</el-button>
            </el-form-item>
            <el-form-item v-if="edit" label="" label-width="102px">
                <el-button @click="cancelEdit" class="bd-draft-btn" :plain="true">取消</el-button>
                <el-button @click="saveEdit" :disabled="adPostStatus" class="bd-next-btn" type="primary">保存</el-button>
            </el-form-item>
        </el-form>

        <upload type="img" />

        <el-dialog title="图片素材" v-model="dialogImages" class="el-title">
            <div v-if="dataStatus != 1" class="white-time">
                <img class="loading-time" v-if="localImages.length == 0 && dataStatus == 0" src="~assets/img/loading.gif" alt="loading">
                <div v-if="localImages.length == 0 && dataStatus == -1">
                    <img class="no-data" src="~assets/img/no-data.png" alt="no-data">
                    <div class="adc-tips">暂无数据</div>
                </div>
            </div>
            <el-checkbox-group v-model="checkedImages" :min="0" :max="5">
                <ul class="adC-imgList">
                    <li v-for="(item,index) in localImages">
                        <el-checkbox :label="index"></el-checkbox>
                        <img v-lazy="item.imgUrl" :index="index" alt="img">
                        <div>{{item.imgName}}</div>
                    </li>
                </ul>
                <el-pagination v-if="localImages.length"
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange0"
                  :total="page.total">
                </el-pagination>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelChooseImage">取 消</el-button>
                <el-button type="primary" :disabled="this.checkedImages.length == 0" @click="chooseLocalImages">选 择</el-button>
            </div>
        </el-dialog>

        <upload type="video" />
        
        <el-dialog title="视频素材" v-model="dialogVideos" class="el-title">
            <div v-if="dataStatus != 1" class="white-time">
                <img class="loading-time" v-if="localVideos.length == 0 && dataStatus == 0" src="~assets/img/loading.gif" alt="loading">
                <div v-if="localVideos.length == 0 && dataStatus == -1">
                    <img class="no-data" src="~assets/img/no-data.png" alt="no-data">
                    <div class="adc-tips">暂无数据</div>
                </div>
            </div>
            <el-checkbox-group v-model="checkedVideo" :min="0" :max="1">
                <ul class="adC-imgList">
                    <li v-for="(item,index) in localVideos" :key="item.id">
                        <el-checkbox :label="index" :key="index"></el-checkbox>
                        <img v-lazy="item.preViewUrl" :index="index" alt="img">
                        <!-- <video v-lazy="item.preViewUrl" width="100%"></video> -->
                        <div>{{item.videoName}}</div>
                    </li>
                </ul>
                <el-pagination v-if="localVideos.length"
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange1"
                  :total="page.total">
                </el-pagination>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelChooseVideo">取 消</el-button>
                <el-button type="primary" :disabled="this.checkedVideo.length == 0" @click="chooseLocalVideo">选 择</el-button>
            </div>
        </el-dialog>
        <loading :customClass="createLoading" v-show="showLoading" />
    </section>
</template>

<script>
    import Vue from 'vue'
    import axios from '~/plugins/axios'
    import { Row,Col,Switch,Checkbox,CheckboxGroup,Button,Input,Form,FormItem,Select,Option,Carousel,Message,Dialog,Pagination } from 'element-ui'
    import { mapGetters, mapMutations ,mapActions} from 'vuex';

    import PcDynamicMessage from '~components/ad-preview/pc-dynamic-message.vue'
    import MbDynamicMessage from '~components/ad-preview/mb-dynamic-message.vue'
    import InstagramDynamic from '~components/ad-preview/instagram-dynamic.vue'
    import Dumbphone from '~components/ad-preview/dumbphone.vue'
    import AudienceNetworkNative from '~components/ad-preview/audience-network-native.vue'
    import FacebookVideoPc from '~components/ad-preview/facebook-video-pc.vue'
    import PcRightMessage from '~components/ad-preview/pc-right-side.vue'
    import NetworkBanner from '~components/ad-preview/network-banner.vue'
    import NetworkInsert from '~components/ad-preview/network-insert.vue'
    import ReadText from '~components/ad-preview/read-text.vue'
    import Upload from '~components/upload/upload.vue';
    import Loading from '~/components/loading.vue'
    import {charCodeLen} from '~/assets/js/global.js'

    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Switch)
    Vue.use(Checkbox)
    Vue.use(CheckboxGroup)
    Vue.use(Button)
    Vue.use(Input)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(Carousel)
    Vue.use(Dialog)
    Vue.use(Pagination)

    Vue.prototype.$message = Message;
    export default {
        components: {
            PcDynamicMessage,
            MbDynamicMessage,
            InstagramDynamic,
            Dumbphone,
            PcRightMessage,
            AudienceNetworkNative,
            FacebookVideoPc,
            NetworkBanner,
            NetworkInsert,
            ReadText,
            Upload,
            Loading
        },
        props: {
            'edit': {
                default: null
            },
        },
        data () {
            return {
                createLoading: '',
                showLoading: false,
                adPostStatus: false,
                adDraftStatus: false,
                adPostDisable: false,
                postFlag: false,
                page: {
                    total: 0,
                    currentPage: 1,
                    size: 9
                },
                adCreate: {
                    homePage: null,
                    message: '',
                    adForm: 'image',
                    isCarousel: false,
                    videoInfo: {
                        title: '',
                        state: '',
                        link: 'http://',
                        hash: '',
                        videoUrl: '',
                        imgUrl: ''
                    },
                    imageInfo: [{
                        title: '',
                        state: '',
                        link: 'http://',
                        text: '',
                        hash: '',
                        imgUrl: ''
                    }],
                    actionType: {
                        label: '无按钮',
                        value: 'VALUE_NO_BUTTON'
                    },
                    uploadImages: [],
                    uploadVideo: {
                        src: '',
                        play: false,
                        duration: 0
                    },
                    showLink: '',
                    preview: '',
                    name: ''
                },
                linkStatus: true,
                rules: {
                    name: [{ required: true, message: '该项为必填项', trigger: 'blur' }],
                },
                homePageList: [],
                editImageIndex: 0,
                dialogImages: false,
                dialogVideos: false,
                popoverImg: {
                    title: '上传图片'
                },
                popoverVideo: {
                    title: '上传视频'
                },
                checkedImages: [],
                checkedVideo: [],
                localImages:[],
                localVideos: [],
                adPreviewPlatform: [],
                currentAdPage: 1,
                srcNum: 1,
                showMoreSetting: false,
                objective:'',
                devicePlatforms:'',
                editAdData: null,
                imgSize: [],
                dataStatus: 0, //0:加载，-1：无数据,1:正常
                nowLength: 50
            }
        },
        computed: {
            ...mapGetters([
                'adverName',
                'adverPlan',
                'budgetSchedule',
                'editAudienceForm',
                'adverLayout'
            ]),
            totalAdPage: function () {
                let len = 0;
                if(this.adCreate.adForm == 'image'){
                    this.srcNum = this.adCreate.isCarousel ? 1 : this.adCreate.uploadImages.length
                }else {
                    this.srcNum = 1
                }
                this.srcNum = this.srcNum < 1 ? 1 : this.srcNum;
                this.$store.commit('STEP_ADTEST',{data: this.srcNum});
                return this.srcNum
            },
            adPreviewData: function () {
                let data = {
                    adText: this.adCreate.message,     //广告文字
                    userInfo: {     //用户信息
                        headImg: null,
                        name: ''
                    },
                    singleImg: {    //单图片
                        using: false,
                        src: '',
                        title: this.adCreate.imageInfo[0].title || '',
                        state: this.adCreate.imageInfo[0].state || '',
                        link: this.adCreate.imageInfo[0].link || '',
                        actionCall: this.adCreate.actionType.label
                    },
                    carousel: {     //轮播图
                        using: false,
                        src: this.adCreate.uploadImages,
                        imageInfo: this.adCreate.imageInfo,
                        actionCall: this.adCreate.actionType.label
                    },
                    video: {        //视频
                        using: false,
                        src: this.adCreate.uploadVideo.src || null,
                        duration: this.adCreate.uploadVideo.duration || 0,
                        title: this.adCreate.videoInfo.title || '',
                        state: this.adCreate.videoInfo.state || '',
                        link: this.adCreate.videoInfo.link || '',
                        actionCall: this.adCreate.actionType.label
                    },
                    showLink: this.adCreate.showLink
                };
                if(!this.homePageList.length) {
                    this.$message({
                        type: 'error',
                        message: '您的Facebook账号没有主页，请先创建主页！'
                    });
                }else {
                    data.userInfo.headImg = this.homePageList[this.adCreate.homePage].picture;
                    data.userInfo.name = this.homePageList[this.adCreate.homePage].name
                }
                data.singleImg.using = this.adCreate.adForm === 'image' && !this.adCreate.isCarousel;
                data.carousel.using = this.adCreate.adForm === 'image' && this.adCreate.isCarousel;
                data.video.using = this.adCreate.adForm === 'video';
                data.carousel.imageInfo.actionCall = this.adCreate.actionType.label;
                //广告分页切换，文字和图片资源组和
                let srcIndex = [];
                for (let i=0;i<this.adCreate.imageInfo.length;i++) {
                        srcIndex.push(i);
                }
                data.singleImg.src = this.adCreate.uploadImages[srcIndex[this.currentAdPage-1]] || '';
                data.singleImg.title = this.adCreate.imageInfo[srcIndex[this.currentAdPage-1]].title || '';
                data.singleImg.state = this.adCreate.imageInfo[srcIndex[this.currentAdPage-1]].state || '';
                data.singleImg.link = this.adCreate.imageInfo[srcIndex[this.currentAdPage-1]].link || '';
                data.singleImg.actionCall = this.adCreate.actionType.label;
                if(!this.adCreate.isCarousel) {
                    data.adText = this.adCreate.imageInfo[srcIndex[this.currentAdPage-1]].text || ''
                }
                return data
            },
            postData: function () {
                let postdata = {
                    "adSeries": { //广告系列
                        "name": this.adverName,  //系列名称
                        "objective": this.objective //广告目标
                    },
                    "adGroup": {  //广告组
                        "name": this.budgetSchedule.adsName, //广告组名称
                        "savedAudience": {  //受众信息
                            "audienceIds": this.editAudienceForm.nameList.id,  //自定义或类似受众,非必传
                            "maxAge": this.editAudienceForm.age.end,  //最大年龄
                            "minAge": this.editAudienceForm.age.start,  //最小年龄
                            "gender": this.editAudienceForm.gender,  //性别：全部(空)，男(1)，女(2),非必传
                            "locales": this.editAudienceForm.language,  //语言,非必传
                            "suggestions": this.editAudienceForm.position.include,  //细分定位,非必传
                            "exclusedSuggestions": this.editAudienceForm.position.exclude,  //	排除细分定位,非必传
                            "connectionType": this.editAudienceForm.checkHomePage.length?this.editAudienceForm.relationship:null,   //关系类型:主页点赞(CONNECTION),主页点赞好友(FRIEND),排除主页点赞(EXCLUDE),非必传
                            "pageConnections": this.editAudienceForm.checkHomePage,  //关系类型facebook主页
                            "places": this.editAudienceForm.addr.include,   //受众地区,非必传
                            "excludePlaces": this.editAudienceForm.addr.exclude //排除受众地区,非必传
                        },
                        "budgetScheduling": {   //预算和排期
                            "isAutoBid": this.budgetSchedule.bidAmount,  //是否自动竞价
                            "bidAmount": this.budgetSchedule.clickCost || null,   //自动竞价金额,非必传
                            "budgetAmount": this.budgetSchedule.budgetLimit,   //预算
                            "isDailyDelivery": this.budgetSchedule.publishTime,    //是否全天投放
                            "timeQuantumList": [],  //投放时间段,非必传
                            "startTime": this.budgetSchedule.startTime,    //开始时间
                            "endTime": this.budgetSchedule.endTime,  //结束时间
                        },
                        "adPosition": { //版位
                            "devicePlatforms": this.devicePlatforms   //设备类型：桌面（VALUE_DESKTOP），移动（VALUE_MOBILE）
                        }
                    },
                    "ad": {   //广告
                        "name": this.adCreate.name,     //广告名称
                        "pageId": this.homePageList[this.adCreate.homePage].id,   //主页ID
                        "pageName": this.homePageList[this.adCreate.homePage].name,     //主页名称
                        "showType": "",     //广告形式：视频(VIDEO),图片(IMAGE),轮播(CAROUSEL)
                        "adContent": [],    //	广告内容，单图片和视频使用,非必传
                        "linkShow": this.adCreate.showLink,     //展示链接,非必传
                    },
                    "archived": false     //是否存为草稿
                };
                //分时段投放
                if(!this.budgetSchedule.publishTime) {
                    let tLen = this.budgetSchedule.timeQuantumList.length;
                    let tArr = [];
                    for (let i=0;i<tLen;i++) {
                        this.budgetSchedule.timeQuantumList[i].days.length ? tArr.push(this.budgetSchedule.timeQuantumList[i]) : false;
                    }
                    postdata.adGroup.budgetScheduling.timeQuantumList = tArr
                }

                if(this.adCreate.adForm == 'image'){
                    postdata.ad.showType = this.adCreate.isCarousel ? 'CAROUSEL' : 'IMAGE';
                    for(let i=0;i<this.adCreate.uploadImages.length;i++) {
                        postdata.ad.adContent.push({
                            "hash": this.adCreate.imageInfo[i].hash,     //图片hash或者视频ID， "df3341949f77e546d90e4c8e96b1b6e6"
                            "imgUrl": this.adCreate.imageInfo[i].imgUrl,     //视频缩略图URL
                            "videoUrl": null,
                            "name": this.adCreate.imageInfo[i].title,   //标题
                            "message": this.adCreate.imageInfo[i].text,   //文字描述
                            "description": this.adCreate.imageInfo[i].state,    //说明
                            "link": this.adCreate.imageInfo[i].link     //链接网址
                        })
                    }
                    if(this.adCreate.isCarousel) {
                        for(let i=0;i<this.adCreate.uploadImages.length;i++) {
                            postdata.ad.adContent[i].message = this.adCreate.message
                        }
                    }
                }
                else{
                    postdata.ad.showType = 'VIDEO';
                    let con = {
                        "hash": this.adCreate.videoInfo.hash,     //图片hash或者视频ID， "136640386881076"
                        "imgUrl": this.adCreate.videoInfo.imgUrl,
                        "videoUrl": this.adCreate.videoInfo.videoUrl,
                        "name": this.adCreate.videoInfo.title,
                        "message": this.adCreate.message,
                        "description": this.adCreate.videoInfo.state,
                        "link": this.adCreate.videoInfo.link
                    };
                    postdata.ad.adContent.push(con);
                }

                return postdata
            }
        },
        methods: {
            //自动名称
            autoAdName(){
                let time = new Date();
                let year = (time.getFullYear()+"").substr(2,2);
                let month = (time.getMonth()+1)<10?"0"+(time.getMonth()+1):(time.getMonth()+1)+"";
                let day = time.getDate()<10?"0"+time.getDate():time.getDate()+"";
                let hour = time.getHours()<10?"0" + time.getHours() : time.getHours();
                let minu = time.getMinutes()<10?"0" + time.getMinutes() : time.getMinutes();
                this.adCreate.name = 'default-'+year+month+day+hour+minu;
            },
            getAdData() {
                this.$store.dispatch('getAdById',{localId: this.$route.query.localId,platFormId: this.$route.query.platFormId})
                    .then((res) => {
                        if(res.data.code == 1 && res.data.data != null) {
                            this.editAdData = res.data.data;
                            this.initAdData()
                        }
                    })
            },
            initAdData() {
                this.adCreate.name = this.editAdData.name;
                for(let i=0;i<this.homePageList.length;i++) {
                    if(this.homePageList[i].id == this.editAdData.pageId){
                        this.adCreate.homePage = i;
                        break
                    }
                }
                this.adCreate.showLink = this.editAdData.linkShow;

                if(this.editAdData.showType == 'VIDEO') {
                    this.adCreate.adForm = 'video';
                    this.adCreate.videoInfo.title = this.editAdData.adContent[0].name;
                    this.adCreate.videoInfo.state = this.editAdData.adContent[0].description;
                    this.adCreate.videoInfo.link = this.editAdData.adContent[0].link;
                    this.adCreate.videoInfo.hash = this.editAdData.adContent[0].hash;
                    this.adCreate.videoInfo.videoUrl = this.editAdData.adContent[0].videoUrl;
                    this.adCreate.videoInfo.imgUrl = this.editAdData.adContent[0].imgUrl;
                    this.adCreate.uploadVideo.src = this.editAdData.adContent[0].videoUrl;
                    this.adCreate.message = this.editAdData.adContent[0].message;
                }else{
                    this.editAdData.showType == 'CAROUSEL' ? this.adCreate.isCarousel = true : this.adCreate.isCarousel = false;
                    this.adCreate.imageInfo[0].title = this.editAdData.adContent[0].name;
                    this.adCreate.imageInfo[0].state = this.editAdData.adContent[0].description;
                    this.adCreate.imageInfo[0].link = this.editAdData.adContent[0].link;
                    this.adCreate.imageInfo[0].hash = this.editAdData.adContent[0].hash;
                    this.adCreate.imageInfo[0].imgUrl = this.editAdData.adContent[0].imgUrl;
                    this.adCreate.uploadImages.push(this.editAdData.adContent[0].imgUrl);
                    this.imgSize.push({setW: 50})

                    for(let i=1;i<this.editAdData.adContent.length;i++) {
                        this.adCreate.imageInfo.push({
                            title: this.editAdData.adContent[i].name,
                            state: this.editAdData.adContent[i].description,
                            link: this.editAdData.adContent[i].link,
                            hash: this.editAdData.adContent[i].hash,
                            imgUrl: this.editAdData.adContent[i].imgUrl
                        });
                        this.adCreate.uploadImages.push(this.editAdData.adContent[i].imgUrl);
                        this.imgSize.push({setW: 50})
                    }
                }

                if(this.editAdData.showType == 'CAROUSEL') {
                    this.adCreate.message = this.editAdData.adContent[0].message;
                }else {
                    for(let i=0;i<this.editAdData.adContent.length;i++) {
                        this.adCreate.imageInfo[i].text = this.editAdData.adContent[i].message;
                    }
                }


            },
            //请求主页列表
            getHomePageList() {
                this.$store.dispatch('getHomePageList').then((res)=>{
                    if(res && res.data.success) {
                        if(res.data.data.length >= 1){
                            this.homePageList = res.data.data;
                            this.adCreate.homePage = 0;
                            this.postFlag = false
                        }else{
                            this.$message({
                                type: 'error',
                                message: '您的Facebook账号没有主页，请先创建主页，否则不能发布广告！'
                            });
                            this.postFlag = true
                        }

                    }
                })
            },
            handleCurrentChange0(val) {
                this.page.currentPage = val;
                this.getImgsList('page')
            },
            handleCurrentChange1(val) {
                this.page.currentPage = val;
                this.getVideosList('page')
            },
            getImgsList(page) {
                this.dataStatus = 0;
                if(this.localImages.length != 0 && page != 'page') return;
                this.$store.dispatch("seachAddImg",{  
                    pageNum:this.page.currentPage,
                    pageSize:this.page.size,
                }).then(res=>{
                    if(res.data.success && res.data.data.list) {
                        this.localImages = [];
                        for(let i=0;i<res.data.data.list.length;i++) {
                            res.data.data.list[i].imgUrl != null ? this.localImages.push(res.data.data.list[i]) : false;
                        }
                        this.page.total = res.data.data.totalCount
                        for(let a in this.localImages){
                            Vue.set(this.localImages[a],'onEdit',false)
                        }
                        this.dataStatus = this.localImages.length ? 1 : -1;
                    }

                })
            },
            getVideosList(page) {
                this.dataStatus = 0;
                if(this.localVideos.length != 0 && page != 'page') return;
                this.$store.dispatch("seachAddVideo",{    
                    pageSize:this.page.size,
                    pageNum:this.page.currentPage
                }).then(res=>{
                    if(res.data.success && res.data.data.list) {
                        this.localVideos = [];
                        for(let i=0;i<res.data.data.list.length;i++) {
                            res.data.data.list[i].videoUrl != null ? this.localVideos.push(res.data.data.list[i]) : false;
                        }
                        this.page.total = res.data.data.totalCount;
                        for(let a in this.localVideos){
                            Vue.set(this.localVideos[a],'onEdit',false)
                        }
                        this.dataStatus = this.localVideos.length ? 1 : -1;
                    }
                })
            },
            showUploadImg() {
                this.$store.commit('SHOW_POPOVER_UPLOAD_IMG', {
                    showPopoverUploadImg: true
                })
            },
            showUploadVideo() {
                this.$store.commit('SHOW_POPOVER_UPLOAD_VIDEO', {
                    showPopoverUploadVideo: true
                })
            },
            showImgs() {
                this.$Lazyload.$off('loaded')
                this.$Lazyload.$off('error')
                this.getImgsList()
                this.dialogImages = true
            },
            showVideos() {
                this.$Lazyload.$off('loaded')
                this.$Lazyload.$off('error')
                this.getVideosList()
                this.dialogVideos = true
            },
            uploadImgSuccess(list){

            },
            uploadImageSuccess(file,editInitFlag) {
                let data = {};
                let url = '';
                if(file.url){
                    url = file.url;
                    data.key = file.key;
                    data.name = file.name;
                    data.w = file.w;
                    data.h = file.h;
                    this.imgSize.push({width: file.w,height:file.h,setW:Math.ceil((file.w/(file.h/100)))+4});
                }else{
                    url = file.imgUrl;
                    data.key = file.imgKey;
                    data.name = file.imgName;
                    data.w = file.width;
                    data.h = file.height;
                    this.imgSize.push({width: file.width,height:file.height,setW:Math.ceil((file.width/(file.height/100)))+4});
                }
                if(this.adCreate.uploadImages.length < 5) {
                    this.adCreate.uploadImages.push(url);
                    if(this.adCreate.uploadImages.length > 1) {
                        this.adCreate.imageInfo.push({
                            title: '',
                            state: '',
                            link: 'http://',
                            text: '',
                            hash: '',
                            imgUrl: ''
                        })
                    }
                    this.editImageIndex = this.adCreate.imageInfo.length - 1;
                    this.adCreate.imageInfo[this.editImageIndex].imgUrl = url
                }else {
                    this.$message({
                        type: 'warning',
                        message: '最多选择5张图片!'
                    });
                }

                let index = this.editImageIndex;
                //上传图片key到fb获取hash
                this.$store.dispatch('uploadAdImg',data)
                    .then((res) => {
                        if(res && res.data.success){
                            this.adCreate.imageInfo[index].hash = res.data.data
                        }
                    })
            },
            chooseLocalImages() {
                this.dialogImages = false;
                for (let i=0;i<this.checkedImages.length;i++) {
                    this.uploadImageSuccess(this.localImages[this.checkedImages[i]])
                }
                this.checkedImages = []
            },
            uploadVideoSuccess(list) {
                let file = list[0];
                this.adCreate.uploadVideo.src = file.videoUrl;
                this.$store.dispatch('uploadAdVideo',{key: file.key,name: file.name,size: file.size || null,persistentId: file.persistentId || null})
                    .then((res) => {
                        if(res && res.data.success) {
                            this.adCreate.videoInfo.hash = res.data.data.fbVideoId;
                            res.data.data.videoUrl ? this.adCreate.videoInfo.videoUrl = res.data.data.videoUrl : true;
                            this.$store.dispatch('getAdVideoImg',{key: res.data.data.previewImgKey})
                                .then((ret) => {
                                    if(ret && ret.data.success) {
                                        ret.data.data ? this.adCreate.videoInfo.imgUrl = ret.data.data : true;
                                    }
                                })
                        }
                    })
            },
            chooseLocalVideo() {
                this.dialogVideos = false;
                let data = this.localVideos[this.checkedVideo[0]];
                let file = [];
                file.push({videoUrl: data.videoUrl,key: data.videoKey,name: data.videoName,size: data.size,persistentId: null});
                this.adCreate.videoInfo.imgUrl = data.preViewUrl;
                this.adCreate.videoInfo.videoUrl = data.videoUrl;
                this.uploadVideoSuccess(file);
                this.checkedVideo = []
            },
            deleteImages(index) {
                this.adCreate.uploadImages.splice(index,1);
                this.imgSize.splice(index,1);
                if(this.adCreate.uploadImages.length > 0) {
                    this.adCreate.imageInfo.splice(index,1);
                }
                this.editImageIndex = this.adCreate.uploadImages.length > 0 ? this.adCreate.uploadImages.length-1 : 0
            },
            deleteVideos() {
                this.adCreate.uploadVideo.src = '';
                this.adCreate.uploadVideo.play = false;
                this.adCreate.uploadVideo.duration = 0
            },
            playVideo() {
                let _this = this;
                let video = document.getElementById("video");
                video.play();
                this.adCreate.uploadVideo.play = true;
                video.addEventListener('ended',function () {
                    _this.adCreate.uploadVideo.play = false
                })
            },
            pauseVideo() {
                let video = document.getElementById("video");
                video.pause();
                this.adCreate.uploadVideo.play = false
            },
            cancelChooseVideo(){
                this.dialogVideos = false;
                this.checkedVideo = []
            },
            cancelChooseImage(){
                this.dialogImages = false;
                this.checkedImages = []
            },
            handleCarouselChange() {
                this.totalAdPage = this.adCreate.isCarousel ? 1 : this.adCreate.uploadImages.length
            },
            pageChange(str) {
                if(str === 'next' && this.currentAdPage < this.totalAdPage) {
                    this.currentAdPage++
                }else if(str === 'prev' && this.currentAdPage != 1) {
                    this.currentAdPage--
                }
            },
            switchAdPreviewPlatform() {
                switch(this.adverPlan){
                    case '访问量': this.adPreviewPlatform = ['桌面版动态消息','移动版动态消息','非智能手机','即阅文','桌面版右边栏','Instagram 动态','Audience Network 横幅广告','Audience Network 插播式广告','Audience Network 原生广告'];
                        this.adCreate.actionType.label = '详细了解';
                        this.adCreate.actionType.value = 'VALUE_LEARN_MORE';
                        this.objective = 'LINK_CLICKS'
                        break;
                    case '品牌知名度': this.adPreviewPlatform = ['桌面版动态消息','移动版动态消息','非智能手机','Instagram 动态','Facebook 视频插播广告位（桌面版）','Facebook 视频插播广告位（移动版）'];
                        this.objective = 'BRAND_AWARENESS'
                        break;
                    case '主页赞': this.adPreviewPlatform = ['桌面版动态消息','移动版动态消息','非智能手机','桌面版右边栏'];
                        this.objective = 'PAGE_LIKES';
                        this.adCreate.isCarousel = false;
                        this.adCreate.videoInfo.title = '';
                        this.adCreate.videoInfo.state = '';
                        this.adCreate.videoInfo.link = '';
                        for(let i=0;i<this.adCreate.imageInfo.length;i++) {
                            this.adCreate.imageInfo[i].title = '';
                            this.adCreate.imageInfo[i].state = '';
                            this.adCreate.imageInfo[i].link = ''
                        }
                        break;
                }
            },
            switchDevice(){
                switch(this.adverLayout.device){
                    case "pc":
                       this.devicePlatforms = ["DESKTOP"]
                    break;
                    case "mb":
                       this.devicePlatforms = ["MOBILE"]
                    break;
                    default:
                        this.devicePlatforms = ["DESKTOP","MOBILE"]
                }
            },
            //校验网址
            checkUrl(link,index) {
                this.$store.dispatch('verifyWebUrl',{webUrl:link})
                    .then((res) => {
                        if(!res) {
                            index != undefined ? this.editImageIndex = index : true;
                            this.linkStatus = false;
                        }else {
                            this.linkStatus = true;
                        }
                    })
            },
            //取消编辑
            cancelEdit() {
                this.$router.go(-1)
            },
            //保存编辑
            saveEdit() {
                this.editAdData.name = this.adCreate.name;
                this.homePageList[this.adCreate.homePage].id ? this.editAdData.pageId = this.homePageList[this.adCreate.homePage].id : false;
                this.homePageList[this.adCreate.homePage].name ? this.editAdData.pageName = this.homePageList[this.adCreate.homePage].name : false;
                this.adCreate.showLink != '' ? this.editAdData.linkShow = this.adCreate.showLink : false;

                if(this.adCreate.adForm == 'video') {
                    this.editAdData.showType = 'VIDEO';
                    this.editAdData.adContent[0] = {
                        "hash": this.adCreate.videoInfo.hash,
                        "imgUrl": this.adCreate.videoInfo.imgUrl,
                        "videoUrl": this.adCreate.videoInfo.videoUrl,
                        "name": this.adCreate.videoInfo.title,
                        "message": this.adCreate.message,
                        "description": this.adCreate.videoInfo.state,
                        "link": this.adCreate.videoInfo.link
                    }
                }else{
                    this.adCreate.isCarousel ? this.editAdData.showType = 'CAROUSEL' : this.editAdData.showType = 'IMAGE';
                    for(let i=0;i<this.adCreate.imageInfo.length;i++) {
                        this.editAdData.adContent[i] = {
                            "hash": this.adCreate.imageInfo[i].hash,
                            "imgUrl": this.adCreate.imageInfo[i].imgUrl,
                            "videoUrl": null,
                            "name": this.adCreate.imageInfo[i].title,
                            "message": this.adCreate.imageInfo[i].text,
                            "description": this.adCreate.imageInfo[i].state,
                            "link": this.adCreate.imageInfo[i].link
                        }
                    }
                    if(this.adCreate.isCarousel) {
                        for(let i=0;i<this.adCreate.imageInfo.length;i++) {
                            this.editAdData.adContent[i].message = this.adCreate.message
                        }
                    }
                }
                this.createLoading = 'top:50%';
                this.showLoading = true;
                this.adPostStatus = true;
                this.$store.dispatch('updateAdData',JSON.stringify(this.editAdData))
                    .then((res) => {
                        this.showLoading = false;
                        this.adPostStatus = false;
                        if(res && res.data.success) {
                            this.$message({
                                type: 'success',
                                message: '编辑广告成功!'
                            });
                            this.$router.go(-1)
                        }
                    }).catch((err) => {
                        this.showLoading = false;
                        this.adPostStatus = false;
                    })
            },
            //缓存广告
            saveDraft() {
                this.$store.dispatch('cacheAd',JSON.stringify(this.postData.ad))
                    .then((res)=>{

                    })
            },
            //发布广告
            nextStep(str) {
                let mes = '发布';
                if(str == 'draft') {
                    this.postData.archived = true;
                    mes = '缓存'
                }
                if(this.adCreate.adForm === 'image' && !this.adCreate.uploadImages[0]) {
                    this.$message({
                        type: 'warning',
                        message: '请为广告选择媒体文件!'
                    });
                    return;
                }
                if(this.adCreate.isCarousel && this.adCreate.uploadImages.length < 2) {
                    this.$message({
                        type: 'warning',
                        message: '轮播和幻灯片至少选择2张图片'
                    });
                    return;
                }
                if(this.adCreate.adForm === 'video' && !this.adCreate.uploadVideo.src) {
                    this.$message({
                        type: 'warning',
                        message: '请为广告选择媒体文件!'
                    });
                    return;
                }
                if(!this.linkStatus && this.adverPlan != '主页赞') {
                    this.$message({
                        type: 'error',
                        message: '链接有误，请输入正确的网址'
                    });
                    return false;
                }
                this.$refs.adCreate.validate((valid) => {
                    if (valid) {
                        this.createLoading = 'top:50%';
                        this.showLoading = true;
                        str == 'draft' ? this.adDraftStatus = true : this.adPostStatus = true;

                        this.$store.dispatch('postAd',JSON.stringify(this.postData)).then((res) => {
                            this.showLoading = false;
                            str == 'draft' ? this.adDraftStatus = false : this.adPostStatus = false;
                            if(res && res.data.success) {
                                this.$message({
                                    type: 'success',
                                    message: mes + '广告成功!'
                                });
                                this.$store.commit('ISADPOSTDONE',{data: true});
                                this.adPostSuccess(res.data,str)
                            }else{
                                this.$store.commit('ADERRORDATA',{data: res.data.data || []});
                                if(res && res.data.message != null) {
                                    this.$message({
                                        type: 'error',
                                        message: res.data.message
                                    });
                                }
                            }
                        }).catch((err) => {
                            this.showLoading = false;
                            str == 'draft' ? this.adDraftStatus = false : this.adPostStatus = false;
                        })
                    } else {
                        for(let i=0;i<this.adCreate.imageInfo.length;i++) {
                            if(this.adCreate.imageInfo[i].link == '') {
                                this.editImageIndex = i;
                                break
                            }
                        }
                        return false
                    }
                })
            },
            //id,status
            adPostSuccess(id,status) {
                if(status == 'draft') {
                    this.$router.push({path: '/manager/facebook/2' });
                }else {
                    let str = this.totalAdPage > 1 ? '/manager/facebook/3&id='+id : '/manager/facebook/2';
                    this.$router.push({path: str });
                }
                this.$store.commit('ISADPOSTDONE',{data: false});
                return true;
            }
        },
        watch: {
            editImageIndex: function () {
                this.currentAdPage = this.editImageIndex + 1;
            },
            postFlag: function () {
                this.postFlag ? this.adPostDisable = true : this.adPostDisable = false;
            },
            adDraftStatus: function() {
                this.adDraftStatus ? this.adPostDisable = true : this.adPostDisable = false;
            },
            adverPlan: function () {
                this.switchAdPreviewPlatform();
            },
            "adverLayout.device"() {
                this.switchDevice()
            },
            checkedImages: function () {
                this.checkedImages.length > 5 ? this.checkedImages.shift() : true
            },
            checkedVideo: function () {
                this.checkedVideo.length > 1 ? this.checkedVideo.shift() : true
            },
            'adCreate.name'(){
                this.nowLength = 50 - charCodeLen(this.adCreate.name)
            }
        },
        created() {
            this.autoAdName()
            this.$store.commit('AD_CREATE',{data: this.adCreate});
            //获取主页列表
            this.getHomePageList()
            this.switchAdPreviewPlatform()
            this.switchDevice()
            //编辑广告
            if(this.edit) {
                this.getAdData()
            }
        },
        mouted() {

        }
    }
</script>

<style lang="scss" >
    .create-ad{
        box-sizing: border-box;
        color: #666;
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        input{
            height: 34px;
            border-color: #d5dfe4;
        }
        .adc-form input{
            height: 28px;
        }
        .el-scrollbar {
            box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.10);
        }
        .el-form-item.is-required .el-form-item__label{
            padding-right: 36px;
        }
        .el-form-item.is-required .el-form-item__label:after{
            content: '：';
            position: absolute;
            right: 12px;
            top:11px;
        }
        .el-form-item.is-required .el-form-item__label:before{
            position: absolute;
            right: 25px;
            top: 11px;
            margin: 0;
        }
        .el-form-item__label{
            position: relative;
        }
        .el-input{
            width: 360px;
            vertical-align: middle;
        }
        .el-form-item{
            margin-bottom: 20px;
            .el-form-item {
                margin-bottom: 12px;
            }
        }
        .el-dialog__footer{
            border-top: 1px solid #eaeef1;
            button{
                font-size: 13px;
                width: 64px;
                height: 29px;
                padding: 0;
                border-radius: 29px;
                & + button{
                        border: none;
                        color: white;
                        background-color: #ffb100;
                    }
            }
        }
        .zhuyeZan{
            padding-bottom: 36px;
        }
        .switch-btn-group{
            box-sizing: border-box;
            height: 34px;
            padding: 2px;
            background: #d5dfe4;
            border-radius: 34px;
            color: white;
            .el-button{
                width: 76px;
                height: 30px;
                padding: 5px 10px;
                border:none;
                color: inherit;
                border-radius: 30px!important;
                background-color: transparent;
                font-size: 14px;
            }
            .switch-avtive{
                color: #666;
                background-color:#fff;
            }
        }
        .FB-ad-tips{
            height: 163px;
            overflow-y: scroll;
            margin-bottom: 16px;
            padding: 5px 9px;
            border: 1px solid #eaeef1;
            background-color: #ffeae9;
            color: #666666;
            font-size: 12px;
            line-height: 20px;
            a{
                color: #168cf8;
            }
            .FB-ad-title{
                color: #333333;
            }
            .FB-ad-state{
                padding-left: 16px;
            }
            .iconfont{
                color: #fe3525;
            }
        }
        .adc-add-btn{
            width: 34px;
            height: 34px;
            margin-left: 8px;
            padding-left: 0;
            padding-right: 0;
            border: none;
            border-radius: 5px;
            background-color: #ffb100;
        }
        .adc-delete-btn{
            width: 34px;
            height: 34px;
            margin-left: 8px;
            padding-left: 0;
            padding-right: 0;
            border: none;
            background-color: transparent;
            color: #d5dfe4;
        }
        .adc-upload-wraper{
            margin-top: 24px;
            padding-left: 16px;
        }
        .adc-box{
            /*display: inline-block;*/
            padding: 8px 16px;
            background-color: #fffaea;
            border-radius: 5px;
            line-height: 26px;
        }
        .icon-focus{
            margin-right: 6px;
            color: #ffb102;
        }
        .adc-box-title{
            margin: 4px 0 6px;
            font-size: 12px;
            line-height: 16px;
        }
        .adc-box-name{
            padding-right: 42px;
            font-size: 12px;
            color: #9b9b9c;
            span{
                color: #666;
            }
        }
        .ad-message-position{
            margin-top: 60px;
        }
        .ad-message{
            position: absolute;
            top: 49px;
            width: 100%;
            &.zhuyeZan{
                 top: 0;
             }
        }

        .adc-btn-group{
            padding: 16px 0;
            button{
                position: relative;
                width: 96px;
                height: 34px;
                border-radius: 34px;
                color: #666;
                input{
                    position: absolute;
                    left: 0;
                    top:0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    cursor: pointer;
                }
            }
        }
        .adc-upload-list{
            overflow: hidden;
            margin-bottom: 8px;
            li{
                position: relative;
                float: left;
                width: auto;
                min-width: 50px;
                height: 100px;
                margin: 0 8px 8px 0;
                text-align: center;
                line-height: 1px;
                img{
                    width: auto;
                    height: 100%;
                    vertical-align: middle;
                    border: 2px solid #dddfe2;
                    &.active{
                        border-color: #4080ff;
                     }
                    &.click{
                         cursor: pointer;
                     }
                }
                img[lazy=loading] {
                    width: 18px;
                    border: none;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform:translate(-50%,-50%);
                }
                img[lazy=error] {
                    height: 18px;
                    width:24px;
                    border: none;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform:translate(-50%,-50%);
                }
                video{
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
                i{
                    position: absolute;
                    right: 6px;
                    top: 6px;
                    font-size: 14px;
                    color: #ccc;
                    cursor: pointer;
                    &:hover{
                        color: white;
                     }
                }
                span{
                    position: absolute;
                    right: 50%;
                    top: 50%;
                    margin: 0 -20px 0 0;
                    font-size: 40px;
                    color: #d5dfe4;
                    cursor: pointer;
                }
                & .icon-stop{
                      display: none;
                  }
                &:hover .show.icon-stop{
                    display: inline-block;
                 }
            }
        }
        .lengthLimit input{
            padding-right: 30px;
        }
        .adc-tips{
            line-height: 8px;
            color: #999;
            font-size: 12px;
        }
        .stringCount{
            box-sizing: border-box;
            word-break: keep-all;
            position: relative;
            left: -28px;
            top: 0;
            padding-right: 6px;
            display: inline-block;
            width: 27px;
            height: 28px;
            text-align: right;
            vertical-align: middle;
            line-height: 28px!important;
        }
        .adc-link-tips{
            padding-left: 109px;
        }
        .advance-setting{
            overflow:hidden;
            .bs-title{
                padding: 0 0 18px;
                .label{
                    font-size: 14px;
                    color: #48576a;
                    display: inline-block;
                    width: 90px;
                    text-align: right;
                    padding-right: 12px;
                }
            }
            .switch__label{
                width: 44px;
                line-height: 28px;
            }
            .bs-container{
                padding-left: 84px;
            }
        }
        .adc-preview{
            border: 1px solid #d5dfe4;
            border-radius: 5px;
            .preview-header{
                overflow: hidden;
                height: 59px;
                padding: 0 15px;
                border-bottom: 1px solid #d5dfe4;
                line-height: 58px;
            }
            .el-select{
                vertical-align: middle;
            }
            .pagination{
                float: right;
                font-size: 12px;
                button{
                    width: 22px;
                    height: 22px;
                    padding: 0;
                    border: 1px solid #d5dfe4;
                    border-radius: 3px;
                    color: #d5dfe4;
                    text-align: center;
                    font-size: 12px;
                    vertical-align: middle;
                    line-height: 22px;
                }
                .disable{
                    cursor: not-allowed;
                }
            }
            .preview-body{
                min-height: 400px;
            }
        }

        .current{
            color: #0d8afa;
        }
        .ad-text-num{
            height: 28px;
            padding: 5px 10px;
            background-color: #0686f9;
        }
        .bd-next-btn,
        .bd-draft-btn{
            width: 152px;
            height: 34px;
            border: none;
            border-radius: 34px;
            color: white;
            background-color: #ffb100;
        }
        .bd-next-btn:hover {
            background: #E59E00;
        }
        .bd-draft-btn{
            color: #666;
            background-color: white;
            border: 1px solid #d5dfe4;
            &:hover{
                color: #0686F9;
                border-color: #0686F9;
             }
        }
        .abtest-con{
            padding: 5px 0 25px 103px;
        }
        .no-homepage-tip{
            padding: 10px 0;
            color: #999;
            font-size: 12px;
            a{
                color: #0686F9;
                text-decoration: underline;
            }
        }
    }
    .white-time{
        position: relative;
        padding: 10px;
        text-align: center;
        .loading-time{
            width: 25px;
            height: auto;
        }
        no-data{
            width: 50px;
            height: auto;
        }
    }
    .adC-imgList{
        overflow: hidden;
        margin-bottom: 10px!important;
        padding:  4px 19px;
        li{
            overflow: visible;
            float: left;
            position: relative;
            width: 92px;
            height: 92px;
            margin: 10px 7px 27px;
            padding: 5px;
            border: 2px solid #ebf0f3;
            border-radius: 2px;
            text-align: center;
            font-size: 13px;
            color: #999;
            line-height: 90px;
            img{
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
            }
            img[lazy=loading] {
                width: 18px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform:translate(-50%,-50%);
            }
            img[lazy=error] {
                height: 18px;
                width:24px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform:translate(-50%,-50%);
            }
            div{
                overflow: hidden;
                position: absolute;
                left: 0;
                top: 111px;
                width: 100%;
                height: 16px;
                text-overflow: ellipsis;
                line-height: 16px;
            }
            .el-checkbox{
                position: absolute;
                right: 5px;
                top: 5px;
                line-height: 18px;
                .el-checkbox__label{
                    display: none;
                }
            }
        }
    }
</style>